<template>
  <div>
    <van-popup v-model="showEdit">
      <van-nav-bar
        title="修改昵称"
        left-arrow
        @click-left="closeEdit"
        @click-right="pushClick"
      >
        <template #right>
          <div style="color:#f40">
            提交
          </div>
        </template>
      </van-nav-bar>
      <van-form ref="form">
        <van-field :rules="rules" v-model="inputValue"></van-field>
      </van-form>
    </van-popup>
  </div>
</template>
<script>
export default {
  name: 'Edit',
  props: ['showEdit'],
  data () {
    return {
      inputValue: '',
      rules: [
        { required: true, message: '必填', trigger: 'onChange' },
        {
          validator: value => {
            return value !== this.$store.state.user.userInfo.name
          },
          message: '不能和当前昵称一样',
          trigger: 'onChange'
        }
      ]
    }
  },
  methods: {
    closeEdit () {
      this.$emit('closeEdit')
    },
    pushClick () {
      this.$refs.form
        .validate()
        .then(() => {
          this.$emit('setUserStore', 'name', this.inputValue)
          this.closeEdit()
        })
        .catch(() => {})
    }
  }
}
</script>
<style scoped lang="less">
.van-popup {
  width: 100%;
  height: 100%;
}
::v-deep .van-field__control {
  background-color: #f8f8f8;
}
</style>
